<template>
  <div class="control-management">
    <div class="drone">
      <div class="drone-left">
        <airlineview :airlineData="airlineData" :taskList="taskList" :changeViewId="changeViewId" />
      </div>
      <div class="drone-center">
        <videoview :imgList="imgList" />
      </div>
      <div class="drone-right">
        <instrumentview :instrumentList="instrumentList" :instrumentData="instrumentData"></instrumentview>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import airlineview from './module/airlineview.vue';
import videoview from './module/videoview.vue';
import instrumentview from './module/instrumentview.vue';
import { taskinfo } from '#/api/daping/airport'
import { useRouter } from 'vue-router';
const router = useRouter();
let flightId;
const changeViewId = ref(1);
const taskList = ref([]);
const airlineData = ref({
  num: '1',
  Id: 'JDl mavic 3 pro',
  name: '李孝利',
  adress: '大力路警务站',
  names: '民警小李',
  distance: '2025年2月28日 14:24:33',
  number: '235688Dq45369',
  status: '已连接',
});
const imgList = ref([
  {
    id: 1,
    time: '2023-02-10 15:20:20',
    address: '路北区建国新华广场交叉路口',
    longitude: '112.306254',
    latitude: '14.258878',
    img: '../../../../assets/image.png',
  },
  {
    id: 1,
    time: '2023-02-10 15:20:20',
    address: '路北区建国新华广场交叉路口',
    longitude: '112.306254',
    latitude: '14.258878',
    img: '../../../../assets/image.png',
  },
  {
    id: 1,
    time: '2023-02-10 15:20:20',
    address: '路北区建国新华广场交叉路口',
    longitude: '112.306254',
    latitude: '14.258878',
    img: '../../../../assets/image.png',
  },
]);

const instrumentList = ref([
  {
    id: 1,
    num: '92%',
    name: '遥控信号',
    icon: 'ion:home-outline',
    url: 'flaybg17.png',
  },
  {
    id: 1,
    num: '92%',
    name: '图传信号',
    icon: 'ion:home-outline',
    url: 'flaybg17.png',
  },
  {
    id: 1,
    num: '75%',
    name: '飞机电量',
    icon: 'ion:home-outline',
    url: 'flaybg15.png',
  },
  {
    id: 1,
    num: '83%',
    name: '遥控电量',
    icon: 'ion:home-outline',
    url: 'flaybg21.png',
  },
  {
    id: 1,
    num: '39℃',
    name: '电池温度',
    icon: 'ion:home-outline',
    url: 'flaybg19.png',
  },
  {
    id: 1,
    num: '-6.5A',
    name: '电流',
    icon: 'ion:home-outline',
    url: 'flaybg22.png',
  },
  {
    id: 1,
    num: '13.6V',
    name: '电压',
    icon: 'ion:home-outline',
    url: 'flaybg18.png',
  },
]);
const instrumentData = ref({
  id: 1,
  num: '16',
  num1: '231m',
  num2: '118.63255665',
  num3: '39.26366613',
});

const getchangeView = (item) => {
  changeViewId.value = item;
};
const get_info = async () => {
  const { data } = await taskinfo({ flightId })
  //任务列表
  taskList.value = data.process

}

if (history.state.flightId) {
  flightId = history.state.flightId
  get_info()
}
</script>

<style lang="scss" scoped>
.back {
  position: absolute;
  // top: 20px;
  // left: 50px;  
}

.control-management {
  position: relative;
  padding: 0.5vh;
  padding-top: 2vh;
  width: 100%;
  height: 92vh;
}

.drone {
  display: flex;
  overflow: hidden;
  height: 100%;

  .drone-left {
    width: calc(30% - 0.5vh);
    margin-right: 0.5vh;
  }

  .drone-center {
    width: 45%;
  }

  .drone-right {
    width: calc(25% - 0.5vh);
    margin-left: 0.5vh;
  }
}
</style>
